<template>
  <div class="app-container form">
    <el-form label-width="140px"  :model="params" :rules="rules" ref="form">
        <el-collapse v-model="activeNames" class="form-collapse">
            <el-collapse-item  name="1" title="个人信息">
                <el-form-item label="用户头像">
                    <pic-upload v-model="params.headUrl" ></pic-upload>
                </el-form-item>
                <el-form-item label="用户名称" prop="name">
                    <tip content="不要有标点符号,繁体字,空格等">
                        <el-input v-model="params.name" placeholder="请输入用户名称" style="width:250px"></el-input>
                    </tip>
                </el-form-item>
                <el-form-item label="用户性别">
                    <el-radio v-model="params.sex" label="1">男</el-radio>
                    <el-radio v-model="params.sex" label="2">女</el-radio>
                </el-form-item>
            </el-collapse-item>
            <el-collapse-item name="2" title="修改密码">
                <el-form-item label="你的登录密码" prop="password">
                    <el-input v-model="params.password" placeholder="请输入登录密码"  style="width:250px"></el-input>
                </el-form-item>
                <el-form-item label="新登陆密码" prop="newPassword">
                    <el-input v-model="params.newPassword" placeholder="请输入新密码"  style="width:250px"></el-input>
                </el-form-item>
                <el-form-item label="再次输入密码" prop="rePassword">
                    <el-input v-model="params.rePassword" placeholder="请再次输入密码"  style="width:250px"></el-input>
                </el-form-item>
            </el-collapse-item>
            <el-collapse-item name="3" title="其他信息">
                <el-form-item label="擅长的领域">
                    <el-checkbox v-model="params.interest.a" >金融行业</el-checkbox>
                    <el-checkbox v-model="params.interest.b" >IT行业</el-checkbox>
                    <el-checkbox v-model="params.interest.c" >销售行业</el-checkbox>
                </el-form-item>
                <el-form-item label="我的描述">
                    <el-input type="textarea" :rows="4" v-model="params.rePassword"  placeholder="请随便输入你的个人描述内容" style="width:500px"></el-input>
                </el-form-item>
            </el-collapse-item>
        </el-collapse>
    </el-form>
    <div class="form-btn-wapper">
      <el-button type="primary" @click="pageSave" v-if="!look">保存</el-button>
      <el-button @click="pageClose" >取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeNames: ['1', '2', '3'],
      params: {
        headUrl: '',
        name: '',
        sex: '1',
        password: '',
        newPassword: '',
        rePassword: '',
        interest: {
          b: true
        }
      },
      rules: {
        name: { required: true, max: 8, message: '请输入用户名称,最多8个字', trigger: 'blur' },
        password: { required: true, message: '请输入你的登录密码', trigger: 'blur' },
        newPassword: { required: true, message: '请输入新登陆密码', trigger: 'blur' },
        rePassword: { required: true, message: '请再次输入密码', trigger: 'blur' }
      }
    }
  },
  methods: {
    pageSave () {
      // this.$router.push({path:'',query:{id:'1',reload:false}})
      this.pageClose()
    },
    pageClose () {
      this.closeTab(true)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
